<template>
	<!-- 机构列表 -->
	<view class="institution-list">
		<view class="item" v-for="(item,index) in dataOptions" :key="index">
			<view class="left">
				<image :src="item.image"></image>
			</view>
			<view class="right">
				<view class="name">{{item.name}}</view>
				<view class="address">{{item.address}}</view>
				<view class="time">{{item.time}}</view>
				<view class="level">{{item.level}}</view>
				<view class="price">
					<text class="icon">￥</text>
					<text class="number">{{item.price}}</text>
					<text class="price-time">/小时</text>
				</view>
				<view class="button">{{appointment}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "institutionList",
		emits: ['appointment', 'open'],
		props: {
			data: {
				type: Array,
				default: () => []
			},
			appointment: {
				type: String,
				default: () => "预约"
			}
		},
		watch: {
			data: {
				handler(newData) {
					this.dataOptions = newData;
				},
				immediate: true,
				deep: true
			}
		},
		data() {
			return {
				dataOptions: []
			};
		}
	}
</script>

<style lang="scss" scoped>
	.institution-list {
		.item {
			display: flex;
			padding: 16rpx;

			.left {
				image {
					width: 196rpx;
					height: 224rpx;
				}
			}

			.right {
				position: relative;
				margin-left:16rpx;
				flex:1;
				.name {
					font-size: 32rpx;
					font-weight: 400;
					color: rgba(54, 68, 79, 1);
				}

				.address {
					margin-top:8rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(94, 103, 110, 1);
				}

				.time {
					margin-top:8rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(94, 103, 110, 1);
				}

				.level {
					margin-top:16rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(94, 103, 110, 1);
				}

				.price {
					margin-top:16rpx;
					.icon{
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(255, 140, 64, 1);
					}
					.number{
						font-size: 28rpx;
						font-weight: 600;
						color: rgba(255, 140, 64, 1);
					}
					.price-time{
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(255, 140, 64, 1);
					}
				}

				.button {
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					right:0;
					bottom: 26rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					border-radius: 24rpx;
					background: $theme-color;
					width: 112rpx;
					height: 48rpx;
				}
			}
		}
	}
</style>